<template>
  <div class="page-container">
    <div class="page-content">
      <div class="panel-container">
        <div class="panel-content">
          <el-tabs
            v-model="tabActive"
            @tab-click="handleTabClick"
          >
            <el-tab-pane
              v-for="item in tabList"
              :key="item.name"
              :label="item.label"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
          <!--搜索-->
          <SearchForm
            ref="SearchForm"
            style="margin-top: 10px"
            :search-form-arr="searchFormArr"
            @searchParma="searchParma"
          />
        </div>
      </div>
      <!--数据信息-->
      <div class="panel-container no-margin">
        <el-table
          ref="table"
          v-loading="dataListLoading"
          stripe
          :data="dataList"
          :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            header-align="center"
            label="编号"
            prop="khid"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="公司名称"
            prop="ComName"
          >
            <template slot-scope="scope">
              <!-- 跳转到publish 带khid参数 -->
              <router-link
                :to="{ name: 'CluePublish', query: { khid: scope.row.khid } }"
              >
                <span class="text-link">
                  {{ scope.row.ComName }}
                </span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="录入人"
            prop="pub_man_name"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="最新批注"
            prop="new_mark_desc"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="录入时间"
            prop="created_time"
          />
        </el-table>
        <el-pagination
          small
          background
          :current-page="pageNumber"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pageTotal"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { apiCustomeSearchList } from '@/api/clue'

export default {
  name: 'ClueInput',
  components: {},
  data() {
    return {
      tabActive: 'my',
      tabList: [
        { name: 'my', label: '本人录入线索清单' },
        { name: 'all', label: '全部录入线索清单' }
      ],
      dataList: [],
      pageNumber: 1,
      pageSize: 10,
      pageTotal: 0,
      dataListLoading: false,
      searchFormArr: [
        {
          fieldName: '录入时间:',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择录入时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd'
        }
      ],
      searchParams: {
        kick_start_time: '',
        kick_end_time: ''
      },
      currentUserId: localStorage.getItem('feijiu_user_uid') || '',
      userNumberId: '',
      currentItem: null
    }
  },
  activated() {
    this.$refs.table.doLayout()
  },
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      if (this.tabActive === 'my') {
        this.userNumberId = this.currentUserId
      }
      this.getSelectList()
      this.getDataList()
    },
    getSelectList() {},
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      let info = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        flag: 0,
        pub_man_id: this.userNumberId
      }
      info = Object.assign(info, this.searchParams)
      apiCustomeSearchList(info)
        .then((res) => {
          const { data, total } = res
          this.dataList = data
          this.pageTotal = total
          this.dataListLoading = false
          this.$refs.table.doLayout()
        })
        .catch((e) => {
          this.dataList = []
          this.pageTotal = 0
          this.dataListLoading = false
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNumber = val
      this.getDataList()
    },
    // 列表查询
    searchParma(e) {
      this.searchFormArr.forEach((item) => {
        if (e[item.field]) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      if (e.time) {
        this.searchParams.kick_start_time = e.time[0]
        this.searchParams.kick_end_time = e.time[1]
      } else {
        this.searchParams.kick_start_time = ''
        this.searchParams.kick_end_time = ''
      }
      this.pageNumber = 1
      this.getDataList()
    },
    // tab切换
    handleTabClick() {
      if (this.tabActive === 'my') {
        this.userNumberId = this.currentUserId
      } else {
        this.userNumberId = ''
      }
      this.pageNumber = 1
      this.getDataList()
    }
  }
}
</script>
